<template>
  <el-dialog :model-value="true" title="课程增加" width="80%" :close-on-click-modal="false" :before-close="handleClose">
    <el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="课程名称" prop="name">
            <el-input v-model="formData.name" maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="课程类别" prop="category">
            <el-input v-model="formData.category" maxlength="32" placeholder="填写java、vue、python等" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="付费类型" prop="paid_type">
            <paid-type-select v-model="formData.paid_type" :empty="false"></paid-type-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="价格" prop="price">
            <el-input v-model="formData.price" type="number" maxlength="8">
              <template #append>元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="讲师" prop="lecturer">
            <el-input v-model="formData.lecturer" maxlength="32" placeholder="填写讲师姓名"/>
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="封面图" prop="cover">
            <image-upload v-model="formData.cover" />
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="课程描述" prop="description">
            <el-input type="textarea" v-model="formData.description" maxlength="256" :rows="5" resize="none" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="warning" @click="handleClose">{{ updateData.length == 0 ? "取消" : "关闭" }}</el-button>
        <el-button @click="handleClear(myForm)">清空</el-button>
        <el-button type="primary" @click.prevent="handleInsert(myForm)" native-type="submit">增加</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits } from "vue";
import ImageUpload from "@/components/public/ImageUpload.vue"
import PaidTypeSelect from "./PaidTypeSelect.vue";
import { FormRules, FormInstance } from "element-plus";
import request from "@/utils/request";

// 记录增加的数据
const updateData = reactive<any[]>([]);

// 定义事件触发器
const emits = defineEmits(["close"]);

// 接收表单参数
const formData = reactive({
  name: "",
  cover: "",
  price: 0,
  paid_type: "0",
  lecturer: "",
  category: "",
  description: ""
});

const myForm = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  category: [{ required: true, message: "请输入价格", trigger: "blur" }],
  lecturer: [{ required: true, message: "请输入讲师", trigger: "blur" }],
});

const handleClose = () => {
  emits("close", updateData);
  updateData.length = 0;
};

const handleClear = (myForm: FormInstance) => {
  if (!myForm) {
    return;
  }
  myForm.resetFields();
}

const handleInsert = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 发起请求
    request({ 
      data: formData, 
      method: "POST", 
      url: "/course/insert" }).then(res => {
      if (res.data.code > 0) {
        alert("增加成功");
        updateData.push({ ...formData });
        myForm.resetFields();
      } else {
        alert("增加失败");
      }
    }, () => {
      alert("增加失败");
    })
  });
}
</script>

<style scoped lang="scss">
:deep(.w-e-text-container video) {
  width: 100%;
}
</style>